<template>
    <div class='editor'>
        <Vueditor ref='text_editor_main'></Vueditor>
        <el-row class='editor-btns' type='flex' justify='start' align='middle'>
            <btn-upload text='插入图片' type='image/gif, image/jpeg, image/png' :host='host' @uploadcomplete='uploadImgComplete'></btn-upload>
        </el-row>
    </div>
</template>
<script>

    import UploadBtn from './UploadButton.vue'
    import { Config } from '../config/base'

    export default{
        data(){
            return{
                host:Config.ossImgHost
            }
        },
        props:{
            content:{
                type:String
            }
        },
        computed:{
            editorContent(){
                return this.content;
            }
        },
        methods:{
            uploadImgComplete(result) {
//                var oldStr = this.$refs.main.getContent();
//                oldStr += '<img src="' + url + '">';
//                this.$refs.main.setContent(oldStr);
//                console.log(this.$refs.main.getContent());
                this.$refs.text_editor_main.$store.dispatch('execCommand', {name: 'insertHTML', value: `<img src="${result.url}">`});
            }
        },
        watch:{
            editorContent(val) {
                this.$refs.text_editor_main.setContent(val);
            }
        },
        components:{
            'btn-upload':UploadBtn
        }
    }

</script>
<style lang="scss">
    .editor {
        .vueditor {
            height:250px;
            text-align:left;
        }

        .editor-btns {
            margin-top: 10px;
        }
    }
</style>
